<template>
	<view class="index-page uni-flex uni-flex-item"  >
		<swiper v-if="dataList && dataList.length > 0" class="index-swiper uni-flex uni-flex-item" :circular="false" :vertical="true" :key="dataList[0].id" @change="verticalSwiperChange">
			<swiper-item class="uni-flex" v-for="(data,index) in dataList" :key="index">
				<swiper class="index-swiper uni-flex uni-flex-item" :circular="false" :vertical="false">
					<swiper-item class="uni-flex" v-for="(data1,index1) in getUserAlbums(data)" :key="index1">
						<image v-if="data1" lazy-load class="index-image uni-flex-item" mode="aspectFill" :src="data1 + '?x-oss-process=image/resize,h_528/auto-orient,1'"></image>

						<view class="index-mask-box">
							<!-- 顶部 -->
							<view class="index-mask-box-top">
								<view class="avatar-box st-flex-align-center">
									<image class="index-mask-box-top-avatar" :src="data.userAvatar" @tap="goDetail(data)"></image>
									<text v-if="data.genderDictValue" class="iconfont" :class="{'icon-nv': data.genderDictValue == 'f','icon-nan': data.genderDictValue == 'm'}"> </text>
									<text class="st-color-white">{{data.name}}</text>
								</view>
							</view>
							<!-- 底部 -->
							<view class="index-mask-box-foot"></view>

							<!-- 左部 -->
							<view class="index-mask-box-left">
								<view class="index-mask-box-info" v-if="data.nowAreaName">
									<text class="st-color-white">现居：{{data.nowAreaName}}</text>
								</view>
								<view class="index-mask-box-info" v-if="data.homeAreaName">
									<text class="st-color-white">家在：{{data.homeAreaName}}</text>
								</view>
								<view class="index-mask-box-info">
									<text class="st-color-white">{{new Date(data.birthDay).getFullYear()}}年{{data.height?(' • '+data.height+'cm'):''}}{{data.weight?(' • '+data.weight+'kg'):''}}</text>
								</view>
								<view class="index-mask-box-info" v-if="data.educationDictName">
									<text class="st-color-white">{{data.educationDictName}}{{data.profession && data.profession!=='undefined'?(' • '+data.profession):''}}</text>
								</view>
								<view class="info-description" v-if="data.description">
									<text class="st-color-white st-font-size-esm">{{data.description}}</text>
								</view>
							</view>
							<!-- 右部 -->
							<view class="index-mask-box-right  st-flex-direction-c">

								<view class="st-flex-direction-c st-margin-top-30-px">
									  <!-- 有意思按钮 -->
									<text class="iconfont icon-xin11 st-font-size-30-px st-line-height-1" @tap="indexEnjoy(data.userEnjoyStatus)"></text>
									<text class="st-color-white st-font-size-sm  uni-center">有意思</text>
								</view>

							</view>
						</view>
					</swiper-item>
				</swiper>
			</swiper-item>
			<!-- 登录提示 -->
			<swiper-item class="uni-flex" v-if="!hasLogin">
				<login  :onWxLogin="wxLogin"></login>
			</swiper-item>
		</swiper>

  <StWxMpShare :shareContent="shareContent" :title-logo="$config.shareTitleLogo" :app-code="$config.mpAppCode"></StWxMpShare>
	</view>
</template>
<script>
import {mapState} from 'vuex'

import StWxMpShare from '../../../../../../../components/wx-mp/web/components/app/StWxMpShare.vue'
// 主要用于分享
import {getCurrentDomain} from '../../../../../../../components/common/web/tools/UrlTools.js'
import EnjoyMixin from '../../mixins/EnjoyMixin.js'

export default {
    mixins: [EnjoyMixin],
    components: {StWxMpShare},
    computed:{
      ...mapState([
          // 用户是否已登录
        'hasLogin',
      ]),
    },
    data() {
      return {
        // 加载的推荐数据
        dataList: [],
        // 当前要分享的内容，传给分享组件
        shareContent: {},
        // 上下滑动的索引，默认从第0个开始
        currentIndex: 0
      }
    },
    onLoad(e) {
      console.log("onLoad")
      // 加载推荐数据

      this.loadRecommend()
    },
    onReady() {
        console.log("onReady")
    },
    onUnload() {
        console.log("onUnload")
    },
    onHide() {
        console.log("onHide")
    },
    onShow() {
        console.log("onShow")
    },
    onTabItemTap (e) {
        // e 的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
      if((e.index == uni.getStorageSync('tabItemIndex') || !uni.getStorageSync('tabItemIndex')) && 'pages/index/index' == e.pagePath){
        this.loadRecommend()
      }
        uni.setStorageSync('tabItemIndex',e.index)
    },
    methods: {
      // 上下滑动监听，主要用于设置分享内容
      verticalSwiperChange(e) {
        let current = e.detail.current
        this.currentIndex = current
        if (this.dataList.length > current) {
          this.shareContent = {
            title: this.dataList[current].name,
            imgUrl: this.dataList[current].userAvatar,
            desc: this.dataList[current].description,
            link: getCurrentDomain() + '/#/pages/detail/detail?userId=' + this.dataList[current].userId
          }
        }
      },

      // 推荐数据加载
      loadRecommend() {
        uni.showLoading({
          title: '加载中'
        });
        this.$http.get('/user-info/recommend').then(res => {
          this.dataList = res.data
          this.shareContent = {
            title: this.dataList[0].name,
            imgUrl: this.dataList[0].userAvatar,
            desc: this.dataList[0].description,
            link: getCurrentDomain() + '/#/pages/detail/detail?userId=' + this.dataList[0].userId

          }
        }).finally(() => {
          uni.hideLoading();
        })
      },
      // 获取用户相册数据，左右滑动展示
      getUserAlbums(data) {
        let r = []
        r.push(data.picUrl)
        data.userAlbums.forEach(item => {
          r.push(item.picUrl)
        })
        return r
      },
      // 跳转到用户详情，目前点击头像跳转
      goDetail(data) {
        uni.navigateTo({
          url: '/pages/detail/detail?userId=' + data.userId
        })
      },

      // 点击有意思触发
      indexEnjoy(userEnjoyStatus) {
        this.enjoy(userEnjoyStatus, () => {
          this.wxLogin()
        }, "首页有意思按钮")
      },
    }
  }
</script>

<style>
	page{
		display: flex;
		flex: 1;
		height: 100%;
	}
	.index-page .index-swiper {
		height: auto;
	}
	.index-page .index-image{
		height: auto;
		width: auto;
	}

	.index-mask-box{
        position: absolute;
        height: 110px;
        width: 100%;
        bottom: 0px;
	}
	.index-mask-box-top{
		position: absolute;
		left: 10px;
		bottom: 10px;
	}
	.index-mask-box-top-avatar {
		height: 60rpx;
		width: 60rpx;
		margin-right: 8px;
		border-radius: 50%;
	}

	.index-mask-box-right{
		position: absolute;
		right: 10px;
		bottom: 50px;
	}
	.index-mask-box-left{
		position: absolute;
		left: 10px;
		bottom: 50px;
	}
    .info-description{
        height: 50px;
        width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
		line-height: 1;
		font-size: 12px;
    }
	.st-flex-direction-c{
		text-align: center;
	}
	.index-mask-box-info{
		line-height: 1.4;
	}
</style>
